<template>
	<view class="tongji-container">
		<scroll-view class="content-scroll" scroll-y>
			<view class="scroll-content">
				<!-- 蓝色头部区域 -->
				<view class="kuang">
					<image class="bj" src="/static/图层 1@3x.png" mode=""></image>
					<view class="nav-bar">
						<view class="nav-left" @click="goBack">
							<uni-icons type="left" size="20" color="#ffffff"></uni-icons>
						</view>
						<text class="title">经营统计</text>
						<view class="nav-right">
							<view>
								<uni-icons type="more-filled" size="22" color="#ffffff"></uni-icons>
							</view>
							<text class="nav-separator">|</text>
							<view>
								<uni-icons type="location-filled" size="22" color="#ffffff"></uni-icons>
							</view>
						</view>
					</view>
				</view>
				
				<!-- 统计卡片容器 -->
				<view class="stats-card-container">
					<!-- 日期选择区域 -->
					<view class="date-filter-section">
						<view class="date-filter-wrapper">
							<view class="date-segmented-control">
								<view class="date-tab" :class="{ active: dateType === 'today' }" @click="selectDate('today')">
									<text>今日</text>
								</view>
								<view class="date-tab" :class="{ active: dateType === 'yesterday' }" @click="selectDate('yesterday')">
									<text>昨日</text>
								</view>
							</view>
							<view class="date-tab custom" @click="showCustomPicker = !showCustomPicker">
								<image class="calendar-icon" src="/static/车联网服务商家端-02经营统计_slices/预约挂号@3x.png" mode="aspectFit"></image>
								<text>自定义</text>
							</view>
						</view>
						
						<!-- 自定义日期下拉菜单 -->
						<view class="custom-picker-menu" v-if="showCustomPicker">
							<view class="picker-item" v-for="(item, index) in customDateOptions" :key="index" @click="selectCustomDate(item, index)">
								<text>{{ item }}</text>
							</view>
						</view>
					</view>
					
					<view class="stats-cards">
						<view class="stat-card income">
							<view class="stat-icon-wrapper income-icon">
								<image class="stat-icon" src="/static/车联网服务商家端-02经营统计_slices/收入@3x.png" mode="aspectFit" @error="handleImageError('income')"></image>
							</view>
							<text class="stat-value">¥2066.56</text>
							<text class="stat-label">收入</text>
						</view>
						<view class="stat-card orders">
							<view class="stat-icon-wrapper order-icon">
								<image class="stat-icon" src="/static/车联网服务商家端-02经营统计_slices/订单-全部订单@3x.png" mode="aspectFit" @error="handleImageError('order')"></image>
							</view>
							<text class="stat-value">53</text>
							<text class="stat-label">订单</text>
						</view>
					</view>
				</view>
				
				<!-- 收入分布图表 -->
				<view class="chart-card">
					<text class="chart-title">收入分布</text>
					<view class="chart-content">
						<view class="donut-chart-wrapper">
							<canvas 
								canvas-id="incomePieChart" 
								class="chart-canvas"
								disable-scroll="true"
							></canvas>
						</view>
						<view class="chart-legend">
							<view class="legend-item">
								<view class="legend-dot purple"></view>
								<text>洗车 占比26%</text>
							</view>
							<view class="legend-item">
								<view class="legend-dot pink"></view>
								<text>保养 占比74%</text>
							</view>
						</view>
					</view>
				</view>
				
				<!-- 订单分布图表 -->
				<view class="chart-card">
					<text class="chart-title">订单分布</text>
					<view class="bar-chart-container">
						<view class="bar-chart-wrapper">
							<view class="y-axis">
								<text>350</text>
								<text>300</text>
								<text>250</text>
								<text>200</text>
								<text>150</text>
								<text>100</text>
								<text>50</text>
								<text>0</text>
							</view>
							<view class="bar-chart">
								<view class="bar-item">
									<view class="bar" style="height: 257rpx; background-color: #007aff;">
										<text class="bar-value">300</text>
									</view>
									<text class="bar-label">维修</text>
								</view>
								<view class="bar-item">
									<view class="bar" style="height: 146rpx; background-color: #5ac8fa;">
										<text class="bar-value">170</text>
									</view>
									<text class="bar-label">保养</text>
								</view>
								<view class="bar-item">
									<view class="bar" style="height: 297rpx; background-color: #ff9500;">
										<text class="bar-value">346</text>
									</view>
									<text class="bar-label">洗车</text>
								</view>
							</view>
						</view>
						<view class="chart-legend">
							<view class="legend-item">
								<view class="legend-dot blue"></view>
								<text>维修 300单</text>
							</view>
							<view class="legend-item">
								<view class="legend-dot light-blue"></view>
								<text>保养 170单</text>
							</view>
							<view class="legend-item">
								<view class="legend-dot orange"></view>
								<text>洗车 346单</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dateType: 'today',
				showCustomPicker: false,
				customDateOptions: ['一周内', '一个月内', '三个月内', '半年内', '一年内'],
				incomeIcon: '/static/车联网服务商家端-02经营统计_slices/收入@3x.png',
				orderIcon: '/static/车联网服务商家端-02经营统计_slices/订单-全部订单@3x.png',
				chartData: [
					{ name: '洗车', value: 500, percent: 26, color: '#9b59b6' },
					{ name: '保养', value: 1566.56, percent: 74, color: '#ff69b4' }
				]
			}
		},
		onLoad() {
			// 在 onLoad 中打印路径，用于调试
			console.log('收入图标路径:', this.incomeIcon)
			console.log('订单图标路径:', this.orderIcon)
		},
		onReady() {
			this.drawPieChart()
		},
		methods: {
			goBack() {
				uni.navigateBack()
			},
			selectDate(type) {
				this.dateType = type
				this.showCustomPicker = false
			},
			selectCustomDate(item, index) {
				this.dateType = 'custom'
				this.showCustomPicker = false
				// TODO: 处理自定义日期选择
			},
			handleImageError(type) {
				console.error('图片加载失败:', type)
				if (type === 'income') {
					console.error('收入图标路径:', this.incomeIcon)
				} else if (type === 'order') {
					console.error('订单图标路径:', this.orderIcon)
				}
			},
			drawPieChart() {
				// 使用更长的延迟确保 canvas 已渲染
				this.$nextTick(() => {
					setTimeout(() => {
						this.drawChart()
					}, 1000)
				})
			},
			drawChart() {
				try {
					const query = uni.createSelectorQuery().in(this)
					query.select('.chart-canvas').boundingClientRect((data) => {
						if (!data) {
							console.error('Canvas 元素未找到')
							return
						}
						
						const ctx = uni.createCanvasContext('incomePieChart', this)
						// 使用固定尺寸，400rpx 转换为实际像素
						const systemInfo = uni.getSystemInfoSync()
						const rpxToPx = systemInfo.windowWidth / 750
						const width = 400 * rpxToPx
						const height = 400 * rpxToPx
						const centerX = width / 2
						const centerY = height / 2
						const radius = 140 * rpxToPx  // 外圆半径
						const innerRadius = 80 * rpxToPx  // 内圆半径
						const startAngle = -Math.PI / 2  // 从顶部开始
						
						// 清空画布
						ctx.clearRect(0, 0, width, height)
						
						let currentAngle = startAngle
						
						// 绘制每个扇形（环形图）
						this.chartData.forEach((item, index) => {
							const angle = (item.percent / 100) * 2 * Math.PI
							const endAngle = currentAngle + angle
							
							// 绘制外圆扇形
							ctx.beginPath()
							ctx.moveTo(centerX, centerY)
							ctx.arc(centerX, centerY, radius, currentAngle, endAngle)
							ctx.closePath()
							ctx.setFillStyle(item.color)
							ctx.fill()
							
							// 绘制内圆（挖空形成环形）
							ctx.beginPath()
							ctx.moveTo(centerX, centerY)
							ctx.arc(centerX, centerY, innerRadius, endAngle, currentAngle, true)
							ctx.closePath()
							ctx.setFillStyle('#ffffff')
							ctx.fill()
							
							// 计算标签连接点
							const midAngle = currentAngle + angle / 2
							const midRadius = (radius + innerRadius) / 2
							
							// 连接线起点（环形中间位置）
							const lineStartX = centerX + Math.cos(midAngle) * midRadius
							const lineStartY = centerY + Math.sin(midAngle) * midRadius
							
							// 连接线终点（根据位置调整）
							let lineEndRadius
							if (index === 0) { // 洗车 - 右上
								lineEndRadius = radius + 60 * rpxToPx
							} else { // 保养 - 左下
								lineEndRadius = radius + 50 * rpxToPx
							}
							
							const lineEndX = centerX + Math.cos(midAngle) * lineEndRadius
							const lineEndY = centerY + Math.sin(midAngle) * lineEndRadius
							
							// 绘制连接线
							ctx.beginPath()
							ctx.moveTo(lineStartX, lineStartY)
							ctx.lineTo(lineEndX, lineEndY)
							ctx.setStrokeStyle(item.color)
							ctx.setLineWidth(2)
							ctx.stroke()
							
							// 绘制标签文字
							const labelText = item.value + '元'
							let textX, textY
							if (index === 0) { // 洗车 - 右上
								textX = lineEndX + 20 * rpxToPx
								textY = lineEndY - 10 * rpxToPx
								ctx.setTextAlign('left')
							} else { // 保养 - 左下
								textX = lineEndX - 20 * rpxToPx
								textY = lineEndY + 10 * rpxToPx
								ctx.setTextAlign('right')
							}
							
							ctx.setFillStyle('#333333')
							ctx.setFontSize(24 * rpxToPx)
							ctx.fillText(labelText, textX, textY)
							
							currentAngle = endAngle
						})
						
						// 绘制完成
						ctx.draw(false, () => {
							console.log('环形图绘制完成')
						})
					}).exec()
				} catch (e) {
					console.error('绘制图表失败:', e)
					// 如果绘制失败，重试一次
					setTimeout(() => {
						this.drawChart()
					}, 500)
				}
			}
		}
	}
</script>

<style scoped>
	.tongji-container {
		width: 100%;
		height: 100vh;
		background: #f5f5f5;
		display: flex;
		flex-direction: column;
	}
	
	.content-scroll {
		flex: 1;
		height: 100vh;
		overflow-y: auto;
		background: transparent;
	}
	
	.scroll-content {
		padding-bottom: 40rpx;
	}
	
	.bj {
		position: absolute;
		z-index: 1;
		width: 750rpx;
		height: 430rpx;
		left: 0;
		top: 0;
	}

	.kuang {
		display: flex;
		flex-direction: column;
		position: relative;
		width: 100%;
		height: 430rpx;
	}

	.nav-bar {
		position: relative;
		z-index: 2;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 30rpx;
		margin-top: 60rpx;
		height: 88rpx;
		box-sizing: border-box;
	}

	.nav-left {
		width: 40rpx;
		height: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: white;
		font-weight: bold;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
	}

	.nav-right {
		display: flex;
		align-items: center;
	}

	.nav-right > view {
		margin-right: 10rpx;
	}

	.nav-right > view:last-child {
		margin-right: 0;
	}

	.nav-separator {
		color: rgba(255, 255, 255, 0.5);
		font-size: 20rpx;
		margin: 0 8rpx;
	}

	.date-filter-section {
		position: relative;
		z-index: 2;
		margin-bottom: 20rpx;
	}
	
	.date-filter-wrapper {
		display: flex;
		align-items: center;
		gap: 20rpx;
	}
	
	.date-segmented-control {
		display: flex;
		background: #fff;
		border-radius: 50rpx;
		padding: 4rpx;
		flex: 1;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
	}
	
	.date-tab {
		flex: 1;
		height: 52rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50rpx;
		font-size: 28rpx;
		transition: all 0.3s;
		background: transparent;
		color: #666;
	}
	
	.date-tab.active {
		background: #007aff;
		color: #fff;
	}
	
	.date-tab.custom {
		flex: 0 0 auto;
		height: 60rpx;
		justify-content: flex-start;
		padding: 0 20rpx;
		background: #fff;
		border-radius: 8rpx;
		color: #666;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
	}

	.date-tab.custom text {
		margin-left: 8rpx;
	}
	
	.calendar-icon {
		width: 32rpx;
		height: 32rpx;
	}

	.custom-picker-menu {
		position: absolute;
		top: 80rpx;
		right: 0;
		width: 200rpx;
		background: #fff;
		border-radius: 8rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
		z-index: 15;
		margin-top: 10rpx;
		overflow: hidden;
		border: 1rpx solid #f0f0f0;
	}

	.picker-item {
		padding: 20rpx;
		font-size: 28rpx;
		color: #333;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.picker-item:last-child {
		border-bottom: none;
	}
	
	.stats-card-container {
		position: relative;
		z-index: 2;
		margin: -120rpx 20rpx 0 20rpx;
		background-color: white;
		border-radius: 30rpx 30rpx 0 0;
		padding: 20rpx 20rpx 30rpx 20rpx;
		box-sizing: border-box;
	}
	
	.stats-cards {
		display: flex;
		margin: 0;
	}

	.stats-cards .stat-card:first-child {
		margin-right: 20rpx;
	}
	
	.stat-card {
		flex: 1;
		border-radius: 16rpx;
		padding: 30rpx 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
		background: #ffffff;
		position: relative;
		min-height: 240rpx;
	}
	
	.stat-icon-wrapper {
		width: 60rpx;
		height: 60rpx;
		border-radius: 12rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 20rpx;
	}
	
	.stat-icon-wrapper.income-icon {
		background: #ff9500;
	}
	
	.stat-icon-wrapper.order-icon {
		background: #5ac8fa;
	}
	
	.stat-icon {
		width: 36rpx;
		height: 36rpx;
		display: block;
		flex-shrink: 0;
		background: transparent;
	}
	
	.stat-icon-wrapper image {
		width: 100%;
		height: 100%;
		display: block;
	}
	
	.stat-value {
		font-size: 32rpx;
		font-weight: 600;
		color: #333;
		margin-bottom: 10rpx;
		text-align: center;
	}
	
	.stat-label {
		font-size: 26rpx;
		color: #999;
		text-align: center;
	}
	
	.chart-card {
		background: #fff;
		margin: 20rpx 30rpx;
		border-radius: 16rpx;
		padding: 30rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
		overflow: visible;
	}
	
	.chart-title {
		font-size: 32rpx;
		font-weight: 500;
		color: #333;
		margin-bottom: 30rpx;
		display: block;
	}
	
	.chart-content {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 20rpx;
		position: relative;
		padding: 40rpx 20rpx;
		min-height: 500rpx;
		overflow: visible;
	}
	
	.donut-chart-wrapper {
		width: 400rpx;
		height: 400rpx;
		position: relative;
		flex-shrink: 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.chart-canvas {
		width: 400rpx;
		height: 400rpx;
		display: block;
	}
	
	.chart-legend {
		flex: 0 0 auto;
		margin-left: 40rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	
	.legend-item {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
		font-size: 26rpx;
		color: #333;
	}
	
	.legend-dot {
		width: 24rpx;
		height: 24rpx;
		border-radius: 4rpx;
		margin-right: 12rpx;
	}
	
	.legend-dot.purple {
		background: #9b59b6;
	}
	
	.legend-dot.pink {
		background: #ff69b4;
	}
	
	.legend-dot.blue {
		background: #007aff;
	}
	
	.legend-dot.light-blue {
		background: #5ac8fa;
	}
	
	.legend-dot.orange {
		background: #ff9500;
	}
	
	.chart-labels {
		display: flex;
		justify-content: space-around;
		margin-top: 30rpx;
		padding-top: 20rpx;
		border-top: 1rpx solid #f0f0f0;
	}
	
	.label-item {
		font-size: 26rpx;
		color: #333;
		font-weight: 500;
	}
	
	.bar-chart-container {
		display: flex;
		align-items: flex-start;
	}
	
	.bar-chart-wrapper {
		flex: 1;
		position: relative;
		display: flex;
		align-items: flex-end;
		height: 350rpx;
		margin-right: 30rpx;
	}

	.y-axis {
		width: 50rpx;
		height: 300rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding-right: 10rpx;
		margin-bottom: 40rpx;
	}

	.y-axis text {
		font-size: 20rpx;
		color: #999;
		text-align: right;
		line-height: 1;
	}

	.bar-chart {
		flex: 1;
		display: flex;
		align-items: flex-end;
		justify-content: space-around;
		height: 300rpx;
		position: relative;
		margin-bottom: 40rpx;
	}

	.bar-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		height: 300rpx;
		justify-content: flex-end;
		margin: 0 10rpx;
	}

	.bar {
		width: 100%;
		border-radius: 4rpx 4rpx 0 0;
		position: relative;
		display: flex;
		align-items: flex-start;
		justify-content: center;
		padding-top: 10rpx;
		min-height: 40rpx;
		box-sizing: border-box;
	}

	.bar-value {
		color: #fff;
		font-size: 24rpx;
		font-weight: 500;
	}

	.bar-label {
		margin-top: 10rpx;
		font-size: 24rpx;
		color: #666;
		text-align: center;
	}
</style>

